@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-tree' !default;

.#{$prefix} {
  &--editable {
    .#{$prefix}__title {
      width: 100%;
      max-width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .#{$prefix}__action {
      flex-shrink: 0;
      margin-inline-start: use-spacing(3);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      width: 38px;
    }

    .#{$prefix}-action-wrap {
      transition: opacity 0.3s;
      opacity: 0;
      visibility: hidden;

      &--visible {
        visibility: visible;
        opacity: 1;

        .#{$prefix}-action-btn {
          color: use-color-mode('primary');
        }
      }
    }

    .#{$prefix}-action-btn {
      position: relative;
      color: use-color('gray', 800);

      &:hover {
        color: use-color-mode('primary');
      }
    }

    .#{$prefix}-node:hover {
      .#{$prefix}-action-wrap {
        visibility: visible;
        opacity: 1;
      }
    }
  }

  &__popper {
    .#{$prefix}-action {
      margin: 0;
      list-style: none;
      color: use-color('gray', 800);
      background-color: use-color-static('white');
      width: 160px;
      box-shadow: 0 2px 8px 0 use-color('gray', 100);
      padding: use-spacing(6) use-spacing(4);
      border-radius: 4px;

      &__item {
        list-style: none;
        padding: 0 use-spacing(6);
        height: use-height-size(8);
        line-height: use-height-size(8);
        font-size: use-text-size('normal');
        cursor: pointer;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        transition: background-color 0.3s;
        color: use-color('gray', 700);
        border-radius: use-border-radius('normal');

        &:not(:last-of-type) {
          margin-bottom: use-spacing(4);
        }

        &:hover {
          background-color: use-color('gray', 100);
        }
      }
    }
  }

  // &-modal {
  //   padding: 16px;
  //   box-sizing: border-box;
  //   width: 240px;
  //   background-color: use-color-static('white');
  //   box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  //   border-radius: 4px;
  //   position: relative;

  //   &-arrow {
  //     z-index: 1;

  //     &::before {
  //       content: '';
  //       position: absolute;
  //       right: 3px;
  //       bottom: 0;
  //       border-left: 6px solid transparent;
  //       border-right: 6px solid transparent;
  //       border-bottom: 6px solid #fff;
  //     }

  //     &::after {
  //       content: '';
  //       position: absolute;
  //       right: 3px;
  //       bottom: 1px;
  //       border-left: 6px solid transparent;
  //       border-right: 6px solid transparent;
  //       border-bottom: 6px solid rgba(0, 0, 0, 0.1);;
  //       filter: blur(1px);
  //       z-index: -1;
  //     }
  //   }

  //   &__body {
  //     padding-top: 4px;
  //     color: #666;
  //     line-height: 24px;
  //   }

  //   &__footer {
  //     display: flex;
  //     justify-content: flex-end;
  //     margin-top: 28px;
  //   }

  //   &__btn--confirm {
  //       margin-left: 10px;
  //   }
  // }
}
